<template>
  <div class="container">
    <div class="swiper-container">
      <van-swipe class="my-swipe" :loop="true" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="e in advList">
          <a :href="e.link" target="_blank"><img
            :src="e.pic_url"
            alt=""
            srcset=""
            class="my-swipe-img"
          /></a>
        </van-swipe-item>
        <!-- <van-swipe-item
          ><img
            src="https://singapore-stock.oss-ap-southeast-1.aliyuncs.com/1815753276855406594.jpg"
            alt=""
            srcset=""
            class="my-swipe-img"
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://singapore-stock.oss-ap-southeast-1.aliyuncs.com/1815753276855406594.jpg"
            alt=""
            srcset=""
            class="my-swipe-img"
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://singapore-stock.oss-ap-southeast-1.aliyuncs.com/1815753276855406594.jpg"
            alt=""
            srcset=""
            class="my-swipe-img"
        /></van-swipe-item> -->
      </van-swipe>
    </div>
    <p class="title_color menu_title">{{t('Menu')}}</p>

    <div class="function-bar">
      <div class="function-nav">
        <div class="function-item" @click="go('/market')">
          <div class="function-nav-icon">
            <img
              src="@/assets/images/index_23.fab0225b.png"
              alt=""
              srcset=""
              class="icon"
            />
          </div>
          <div class="function-nav-text">{{t('Daily Trading')}}</div>
        </div>
        <div class="function-item" @click="go('/blockTrading')">
          <div class="function-nav-icon">
            <img
              src="@/assets/images/index_18.5d0d215b.png"
              alt=""
              srcset=""
              class="icon"
            />
          </div>
          <div class="function-nav-text">{{t('OTC Trading')}}</div>
        </div>
        <div class="function-item" @click="go('/gather')">
          <div class="function-nav-icon">
            <img
              src="@/assets/images/index_21.3e801bf6.png"
              alt=""
              srcset=""
              class="icon"
            />
          </div>
          <div class="function-nav-text">{{t('Quantitative trading')}}</div>
        </div>
        <div class="function-item" @click="go('/ipo')">
          <div class="function-nav-icon">
            <img
              src=""
              alt=""
              srcset=""
              class="icon"
            />
          </div>
          <div class="function-nav-text">{{t('Initial Public Offerings')}}</div>
        </div>
        <div class="function-item" @click="go('/payBalance')">
          <div class="function-nav-icon">
            <img
              src=""
              alt=""
              srcset=""
              class="icon"
            />
          </div>
          <div class="function-nav-text" >{{t('Deposit')}}</div>
        </div>
        <div class="function-item" @click="go('/withdraw')">
          <div class="function-nav-icon">
            <img
              src="@/assets/images/index_28-10.d4be826e.png"
              alt=""
              srcset=""
              class="icon"
            />
          </div>
          <div class="function-nav-text">{{t('Withdrawal')}}</div>
        </div>
      </div>
    </div>

    <div class="hot-container">
      <div class="hot-content-head title_color">{{t('Stocks')}}</div>
      <div class="hot-container-item-content">
        <div class="hot-container-item">
          <div class="hot-content-value">
            <div class="hot-content-value-item-m">
              <div class="hot-content-value-item-m-t">SENSEX</div>
              <div class="hot-content-value-item-m-b">{{ date(indexMap.BSESN.date)}}</div>
            </div>
            <div class="hot-content-value-item-r">
              <div class="hot-content-value-item-r-t">{{ indexMap.BSESN.close }}</div>
              <div
                class="hot-content-value-item-r-b"
                :class="indexMap.BSESN.isUp ? 'upper' : 'lower'"
              >
              {{ indexMap.BSESN.balance }} ({{indexMap.BSESN.rate}}%)
              </div>
            </div>
            <!-- <div class="hot-content-value-item-img">
              <img
                src=""
                alt=""
              />
            </div> -->
          </div>
        </div>
        <div class="hot-container-item">
          <div class="hot-content-value">
            <div class="hot-content-value-item-m">
              <div class="hot-content-value-item-m-t">NIFTY 50</div>
              <div class="hot-content-value-item-m-b">{{ date(indexMap.NSEI.date) }}</div>
            </div>
            <div class="hot-content-value-item-r">
              <div class="hot-content-value-item-r-t">{{ indexMap.NSEI.close }}</div>
              <div
                class="hot-content-value-item-r-b"
                :class="indexMap.BSESN.isUp ? 'upper' : 'lower'"
              >
                {{ indexMap.NSEI.balance }} ({{ indexMap.NSEI.rate }}%)
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="news-container-plat-content-title title_color">{{t('News')}}</div>
    <div class="news-container-plat-content"><div>{{t('All News')}}</div></div>
    <div  class="news-container" >
      <van-list
        @Load="getNewsList"
        :finished="finished"
        :finishedText="t('No more data')"
        v-model:loading="loading"
        :loading-text="t('loading......')"
      >
        <van-cell v-for="e in newsList" :key="e.id" >
          <div  class="news-item" @click="go('/news/detail', {id:e.id})">
            <div  class="news-item-right">
              <img
                
                :src="e.url"
                class="news-item-right-image"
              />
            </div>
            <div  class="news-item-left">
              <div  class="news-item-title">{{e.msg_title}}</div>
              <div  class="news-item-time">Time: {{date(e.create_datetime)}}</div>
            </div>
          </div>
        </van-cell>
      </van-list>
      
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import {useRouter} from "vue-router"
import { get } from '@/utils/request'
import {date} from '@/utils/util'
import store from '@/store/index.js'
import { t } from '@/languages'
const router = useRouter()
const advList = ref([])
const newsList = ref([])
const indexMap = computed(() => store.indexMap)
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
async function getNewsList() {
  try {
    const res = await get('/api/app/messages/', {
      limit: 10,
      page:  page.value
    })
    newsList.value = [...newsList.value, ...res.messages]
    if(newsList.value.length === res.count) {
      finished.value = true
    } else {
      page.value += 1
    }
  } catch (error) {
    finished.value = true
    console.log(error)
  } finally {
    loading.value = false
  }
}




async function getAdvList() {
  try {
    const res = await get('/api/app/advertises/')
    advList.value = res || []
    console.log(advList.value)
  } catch (error) {
    console.log(error)
  }
}

function go(path, query = {}){
  router.push({
    path,
    query
  })
}

onMounted(() => {
  getAdvList()
})
</script>

<style lang="scss" scoped>
.container {
  padding: 0.26667rem 0;
  padding-bottom: 1.33333rem;
  .swiper-container {
    padding: 0 0.26667rem;
  }
  .my-swipe {
    height: 5.33333rem;
    background-color: #fff;
    .my-swipe-img {
      width: 100%;
      height: 100%;
    }
  }
  .menu_title {
    font-size: 0.48rem;
    font-weight: 600;
    margin-left: 0.26667rem;
    margin-top: 0.66667rem;
  }
  .title_color {
    background: linear-gradient(0deg, #62f792, #63fddb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
}
.van-cell {
  padding: 0 !important;
}
.container .function-bar {
  margin: 0.26667rem;
  margin-bottom: 0;
  border: 0.02667rem solid #2b4e5a;
  padding: 0.26667rem;
  border-radius: 0.10667rem;
  background: #0e1822;
}

.container .function-bar .function-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.26667rem;
}

.container .function-bar .function-nav .function-item {
  width: 100%;
  min-height: 1.6rem;
  border-radius: 0.26667rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin-top: 0.26667rem;
}

.container .function-bar .function-nav .function-item .function-nav-icon {
  width: 2.13333rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .function-bar .function-nav .function-item .function-nav-icon .icon {
  width: 0.90667rem;
  height: 0.90667rem;
}

.container .function-bar .function-nav .function-item .function-nav-text {
  color: #fff;
  font-size: 0.37333rem;
  margin-top: 0.13333rem;
  text-align: center;
  flex: 1;
}

.container .hot-container {
  padding: 0 0.26667rem;
}

.container .hot-container .hot-content-head {
  font-size: 0.48rem;
  font-weight: 700;
  color: #325d79;
  padding: 0.53333rem 0;
}

.container .hot-container .hot-container-item-content {
  border: 0.02667rem solid #2b4e5a;
  padding: 0.26667rem;
  display: flex;
  justify-content: center;
  align-items: center
}

.container .hot-container .hot-container-item {
  background: #111d29;
  padding-top: 0.26667rem;
  border-radius: 0.26667rem;
  border: 0.02667rem solid #2b4e5a;
  margin: 0 0.2rem;
  box-shadow: 0 0.16rem 0.8rem 0.13333rem rgba(0, 0, 0, 0.12);
}

.container .hot-container .hot-content-value {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-l
  .hot-content-value-item-l-container {
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-l
  .hot-content-value-item-l-container
  .code {
  width: 0.8rem;
  height: 0.8rem;
}

.container .hot-container .hot-content-value .hot-content-value-item-m {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-m
  .hot-content-value-item-m-t {
  color: #fff;
  font-size: 0.42667rem;
  margin-bottom: 0.13333rem;
  font-weight: 700;
  line-height: 0.53333rem;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-m
  .hot-content-value-item-m-b {
  color: #62f792;
  margin-bottom: 0.13333rem;
}

.container .hot-container .hot-content-value .hot-content-value-item-r {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-r
  .hot-content-value-item-r-t {
  margin: 0.16rem 0;
  color: #4baf68;
  font-size: 0.37333rem;
  text-align: center;
  line-height: 0.53333rem;
}

.hot-content-value-item-r-b {
  padding:0.2rem 0.3rem;
  white-space: nowrap;
}

.container .hot-container .hot-content-value .hot-content-value-item-img {
  text-align: center;
}

.container .hot-container .hot-content-value .hot-content-value-item-img img {
  width: 90%;
  height: 1.46667rem;
}

.container .news-container-plat-content-title {
  margin-top: 0.53333rem;
  margin-bottom: 0.13333rem;
  padding-left: 0.4rem;
  font-size: 0.48rem;
  font-weight: 700;
  color: #325d79;
}

.container .news-container-plat-content {
  display: flex;
  padding: 0.26667rem 0.26667rem;
  overflow: auto;
  background: #0f3a40;
  font-weight: 700;
  font-size: 0.37333rem;
  color: #f8b253;
}

.container .news-container-plat-content .news-container-plat-content-item {
  display: flex;
  border-radius: 0.26667rem;
  background: linear-gradient(99deg, #325d79 15.77%, #60b2e7 88.23%);
  margin-right: 0.42667rem;
  height: 3.73333rem;
  padding: 0.26667rem;
  align-items: center;
}

.container
  .news-container-plat-content
  .news-container-plat-content-item
  .news-container-plat-content-item-image {
  display: block;
  width: 3.73333rem;
  height: 2.66667rem;
  border-radius: 0.13333rem;
}

.container
  .news-container-plat-content
  .news-container-plat-content-item
  .news-container-plat-content-item-title {
  padding: 0.4rem 0;
  width: 3.73333rem;
}

.container
  .news-container-plat-content
  .news-container-plat-content-item
  .news-container-plat-content-item-title
  .news-container-plat-content-item-title-top {
  font-weight: 700;
  color: #fff;
}

.container
  .news-container-plat-content
  .news-container-plat-content-item
  .news-container-plat-content-item-title
  .news-container-plat-content-item-title-date {
  color: hsla(0, 0%, 100%, 0.7);
  margin-top: 0.13333rem;
}

.container .news-container {
  padding: 0 0.26667rem;
}

.container .news-container .news-item {
  padding: 0.4rem 0;
  display: flex;
  align-items: center;
  border-bottom: 0.02667rem solid #0f3a40;
  margin-bottom: 0.26667rem;
  padding: 0.26667rem;
  border-radius: 0.26667rem;
}

.container .news-container .news-item-right .news-item-right-image {
  border: 0.05333rem solid #0f3a40;
  border-radius: 0.10667rem;
  width: 2.13333rem;
  height: 2.13333rem;
}

.container .news-container .news-item-left {
  padding-left: 0.26667rem;
}

.container .news-container .news-item-title {
  font-size: 0.32rem;
  font-weight: 700;
  line-height: 0.53333rem;
  color: #fff;
  text-align: left;
}

.container .news-container .news-item-time {
  font-size: 0.32rem;
  color: #aeaeae;
  font-weight: 700;
  line-height: 0.53333rem;
  margin-top: 0.53333rem;
  text-align: end;
}

</style>
